<template>
    <div>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                    <div>
                        <span class="preview-title">课程大纲</span>
                        <span v-text="courseName"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="navbar clearfix">
            <div class="navbar-back" @click="GoBack">
                <i class="iconfont icon-fanhui3"></i>
                <span>返回</span>
            </div>
        </div> -->
        <div class="jx-content">
            <div class="markdown-body editormd-preview-container" v-html="markHtml"></div>
            <div class="no-data-tips" v-if="markHtml == ''">
                <img src="./../../../assets/images/index_no_data.png" />
                <p>暂无内容</p>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return{
                courseId: '',
                courseName: '',
                markHtml: ''
            }
        },
        created() {
            let self = this
            // 课程ID
            self.courseId = self.$route.query.courseId
            self.InitHeaderInfo()
            self.init()
            console.log(self.courseId)
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId +'/resource?resourceType=15').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.courseOutline.displayVersion.length > 0){
                           self.content = res.data.courseOutline.displayVersion[0].htmlContent
                           self.markHtml = res.data.courseOutline.displayVersion[0].htmlContent
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/0').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        }
    }
</script>


<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    .preview-top {
        height: 60px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
        .preview-top1 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background: #101937;
            position: fixed;
            top: 0;
            color: #fff;
            font-size: 14px;
            .preview-top-content {
                width:1200px;
                margin:0 auto;
                position: relative;
                span{
                    margin-right:40px;
                }
                .preview-title {
                    font-size: 18px;
                    margin-right: 40px;
                }
                .preview-line{
                    margin:0 6px;
                }
            }
        }
        .preview-top2 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            position: fixed;
            top: 80px;
            padding:0;
            font-size: 14px;
            .preview-top-content{
                width:1200px;
                margin:0 auto;
                padding:0 40px;
                .button-style{
                    margin-left:20px;
                }
            }
        }
    }
    .jx-resource-list{
        margin-bottom: 28px;
    }
    .jx-content{
        position: relative;
        margin-top: 40px;
    }
    // 暂无数据
    .no-data-tips{
        padding-top: 18%;
        padding-bottom: 18%;
        text-align: center;
        &>p{
            margin: 30px 0;
            color: #9999;
            font-size: 16px
        }
    }
    .navbar{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }
    .navbar-back{
        float: right;
        cursor: pointer;
        margin-top: 18px;
        span{
            font-size: 12px;
        }
        &:hover{
            color: #1277eb;
        }
    }
</style>

